<template>
<div class="app-view-container" ref="view">
  <mu-flexbox orient="vertical" :gutter="0" style="min-height:100%">
    <mu-flexbox-item grow="0">
       <app-calendar class="app-calendar" :shouldActivedDate="shouldActivedDate" @selected="handleSelected" @monthChange="handleMonthChange"/>
    </mu-flexbox-item>
    <mu-flexbox-item class="app-content">
      <timeline>
        <!-- <timeline-item class='timepoint-empty' v-if="!hasMemoInToday" :date="dateFormat(today,'dd')" :month="transformMonth(today.getMonth()+1)">
            <span slot="icon">空</span>
            <i class="icon_family"></i>
            <div>噢哦~今天还没有记录大事件哦！</div>
        </timeline-item> -->
        <template v-for="item,j in memos">
          <timeline-item :primary="true" v-if="(j==0&&new Date(item.occurredTime).getFullYear()!==today.getFullYear())||(j>0&&new Date(item.occurredTime).getFullYear()!==new Date(memos[j-1].occurredTime).getFullYear())" :date="new Date(item.occurredTime).getFullYear()"></timeline-item>
          <timeline-item :date="dateFormat(item.occurredTime,'dd')" :month="transformMonth(new Date(item.occurredTime).getMonth()+1)" :class="'record'+dateFormat(item.occurredTime,'yyyyMMdd')">
            <div class="record-title" @click="viewItem(item)">{{item.memorabiliaTitle}}</div>
            <div class="record-subtitle">{{dateFormat(item.occurredTime,'yyyy-MM-dd')}}</div>
            <div class="record-content" @click="viewItem(item)">{{item.memorabiliaText}}</div>
            <div class="record-action"><mu-flat-button class="size-s" label="文件列表" labelPosition="before" icon="unfold_more" color="#34867e" @click="toggleFilelist(item.id,item.familyId)"/></div>
            <bigevent-file-list v-if="typeof fileListState[item.id]!=='undefined'" v-show="fileListState[item.id]&&fileListState[item.id].show"  @click="handleFileClick" :list="fileListState[item.id]?fileListState[item.id].list:[]"></bigevent-file-list>
            <div class="file-loading" v-if="fileListState[item.id]&&fileListState[item.id].loading">文件加载中</div>
          </timeline-item>
        </template>
      </timeline>
      <div class="app-floatbtn-bar">
        <mu-float-button icon="add" mini class="demo-float-button" :to="{name:'bigeventEdit',params:{id:'0',action:'add',ucode:ucode}}"/>
      </div>
      <mu-infinite-scroll :scroller="scroller" :loading="loading" @load="loadMore"/>
    </mu-flexbox-item>
  </mu-flexbox>
</div>
</template>

<script>
  import Vue from 'vue'
  import {isEqualDate,isEqualMonth,transformMonth,dateFormat} from 'scripts/common'

  import {timeline,timelineItem} from 'components/timeline'
  Vue.component(timeline.name, timeline)
  Vue.component(timelineItem.name, timelineItem)

  //大事件文件列表
  import {bigeventFileList} from '../components/fileList'
  Vue.component(bigeventFileList.name, bigeventFileList)

  import services from 'services'
  export default {
    data:function() {
      return {
        ucode:null,
        //滚动加载
        scroller: null,
        loading: false,
        //分页参数
        totalPage:1,
        currentPage:0,
        pageSize:10,
        //页面数据
        // hasMemoInToday:false,
        today:new Date(),
        displayDate:new Date().setDate(1),
        memos:[],
        fileListState:{}
      }
    },
    computed:{
       inMonthFirstDate (){
        //获取月份最后一天
        return new Date(new Date(this.displayDate).getFullYear(),new Date(this.displayDate).getMonth(),1)
       },
       inMonthLastDate (){
        //获取月份最后一天
        return new Date(new Date(this.displayDate).getFullYear(),new Date(this.displayDate).getMonth()+1,0,23,59,59)
       },
      activeDay:function() {
        //计算特殊日期
        return this.memos.map(function(o){return o.occurredTime})
      },
      descMemos:function() {
        //排序后的大事件
        this.loopYear=null;
        return this.memos.sort(function(item1,item2){
          return new Date(item1.occurredTime).getTime()<new Date(item2.occurredTime).getTime()
        })
      },
      // getStartQuery:function() {
      //   return (this.currentPage-1)*this.pageSize;
      // },
      lastFullPaths:function(){ return this.$store.getters.lastFullPaths }
    },
    mounted:function() {
      this.scroller = this.$refs.view;
      this.getData();
    },
    beforeRouteUpdate (to,form,next){
      this.getData();
      next()
    },
    beforeRouteLeave (to,form,next){
      if (window.$&&$.fancybox&&$.fancybox.getInstance()&&this.lastFullPaths[0]==to.fullPath) {
        $.fancybox.close();
        next(false)
      }else{
        window.$&&$.fancybox&&$.fancybox.close();
        next()
      }
    },
    methods:{
      getData (){
        if(this.ucode==null){
          //获取附件上传ucode
          services.BigEventService.getUcode({
            success:(data)=>{
              this.ucode=data;
            }
          })
        }
        //获取本月大事件
        services.BigEventService.getMemos({
          data:{
            // startQuery:this.getStartQuery,//当前页
            pageSize:this.pageSize,//每页记录数
            currentPage:this.currentPage+1,//当前页
            beginTime:this.inMonthFirstDate,//本月第一天
            endTime:this.inMonthLastDate//本月最后一天
          },
          success:(data)=>{
            this.totalPage=data.totalPage;
            this.currentPage=data.currentPage;
            this.memos=this.memos.concat(data.list);
            // for(var item of this.memos){
            //   if(isEqualDate(item.occurredTime,this.today)){
            //     this.hasMemoInToday=true;
            //     break;
            //   }
            // }
          }
        })
      },
      loadMore () {
        if (this.currentPage>=this.totalPage) return
        this.loading = true
        //获取大事件列表
        services.BigEventService.getMemos({
          data:{
            // startQuery:this.getStartQuery,//
            pageSize:this.pageSize,//每页记录数
            currentPage:this.currentPage+1,//当前页
            beginTime:this.inMonthFirstDate,//本月第一天
            endTime:this.inMonthLastDate//本月最后一天
          },
          success:(data)=>{
            this.currentPage=data.currentPage;
            this.memos=this.memos.concat(data.list);
            // for(var item of this.memos){
            //   if(isEqualDate(item.occurredTime,this.today)){
            //     this.hasMemoInToday=true;
            //     break;
            //   }
            // }
          },
          complete:()=>{
            this.loading = false
          }
        })
      },
      viewItem(item){
        this.$router.push({name:'bigeventPage',params:{id:item.id,data:item,action:'view'}});
      },
      handleSelected (date) {
        //选择日期，跳转至对应日期的大事件上
        var record=document.querySelector('.record'+this.dateFormat(date,'yyyyMMdd'));
        record!== null&&(this.$refs.view.scrollTop=record.offsetTop)
      },
      handleMonthChange (displayDate) {
        //初始化分页参数
        this.totalPage=1,
        this.currentPage=0,
        this.pageSize=3,
        this.memos=[];
        //月份切换，displayDate为显示月份的1号
        this.displayDate=displayDate
        this.getData ()
      },
      shouldActivedDate (day) {
        //特殊日期
        for(var item of this.activeDay) {
          if(isEqualDate(new Date(item),day))
            return true
        }
        return false
      },
       isEqualDate:isEqualDate,
       isEqualMonth:isEqualMonth,
       dateFormat: dateFormat,
       transformMonth:transformMonth,
      downloadFile (){
       },
      handleFileClick (fileData){
        //下载文件
        services.BigEventService.downMemoFile({
          data:{
            fileId:fileData.id
          },
          success:(data)=>{
            console.log('download success in bigevent.vue');
          }
        })
        //点击下载文件
        // alert(JSON.stringify(fileData))
      },
      toggleFilelist (id,familyId){
        var vm=this
        if (!this.fileListState[id]){
          this.$set(this.fileListState,id,{show:false,loading:true})
          //获取文件列表
          services.BigEventService.getMemoFile({
            data:{
              id:id,
              familyId:familyId
            },
            success:(data)=>{
              vm.$set(vm.fileListState[id],'list',data)
            },
            complete:()=>{
              vm.$set(vm.fileListState[id],'loading',false)
            }
          })
        }
        this.$set(this.fileListState[id],'show',!this.fileListState[id].show)
      }
    }
  }
</script>

<style>
.record-title{color: #338bc8;font-size: 14px;cursor: pointer;}
.record-subtitle{color: #999;font-size: 12px;line-height:18px;}
.record-content{color: #494949;padding:2px 0;cursor: pointer;}
.record-action{text-align: right;}
.file-loading{color: #999;text-align: center;font-size: 12px;}
/*覆盖Muse-UI日历样式*/
.mu-calendar-monthday{height:254px;}
.mu-calendar-monthday-content{height: 268px;}
</style>
